<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>留言评论</title>
</head>
<body>
    <h1>留言评论</h1>
    <div id="login-section">
        <h2>用户登录</h2>
        <form>
            <label for="username">用户名：</label>
            <input type="text" id="username" required>
            <label for="password">密码：</label>
            <input type="password" id="password" required>
            <input type="submit" value="登录">
        </form>
    </div>
    <div id="comment-section" style="display: none;">
        <h2>发表评论</h2>
        <form id="comment-form">
            <label for="comment">评论：</label>
            <textarea id="comment" required></textarea>
            <input type="submit" value="提交评论">
        </form>
        <h2>评论列表</h2>
        <div id="comments"></div>
    </div>
    <script>
        // 简单逻辑，实际需与后端交互
        const loginForm = document.getElementById('login-section');
        const commentForm = document.getElementById('comment-form');
        const commentSection = document.getElementById('comment-section');
        loginForm.addEventListener('submit', function (e) {
            e.preventDefault();
            // 模拟登录成功，显示评论区
            commentSection.style.display = 'block';
            loginForm.style.display = 'none';
        });
        commentForm.addEventListener('submit', function (e) {
            e.preventDefault();
            const comment = document.getElementById('comment').value;
            const commentsDiv = document.getElementById('comments');
            const commentElement = document.createElement('div');
            commentElement.innerHTML = `<p>${comment}</p >`;
            commentsDiv.appendChild(commentElement);
            commentForm.reset();
        });
    </script>
</body>
</html>